<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <c:import url="../common/common.jsp"></c:import>
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/css/ie10-viewport-bug-workaround.css"
          rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/examples/dashboard/dashboard.css"
          rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie8-responsive-file-warning.js"></script>
    <![endif]-->
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie-emulation-modes-warning.js"></script>

</head>

<body>
<!-- 头部导航 -->
<c:import url="../common/adminNav.jsp"></c:import>

<!--左侧菜单-->
<div class="admin-iframe-content">
    <div id="menu" class="admin-iframe-menu">
        <ul>
            <li class="javaex-menu-item alone hover">
                <a href="#">首页</a>
            </li>
        </ul>
        <ul>
            <li class="javaex-menu-item">
                <a href="#">系统管理<i class="icon-angle-down"></i></a>
                <ul>
                    <li><a href="/page/admin/user_info/index.jsp">管理员管理</a></li>
                    <li><a href="/page/admin/user_info/user_list.jsp">用户管理</a></li>
                    <li><a href="#">角色管理</a></li>
                    <li><a href="#">分类管理</a></li>
                    <li><a href="#">权限管理</a></li>
                    <li><a href="#">日志管理</a></li>
                </ul>
            </li>
            <li class="javaex-menu-item">
                <a href="#">工作管理<i class="icon-angle-down"></i></a>
                <ul>
                    <li><a href="/page/admin/user_info/move_list.jsp">视频管理</a></li>
                    <li><a href="#">订单管理</a></li>
                    <li><a href="#">轮播图管理</a></li>
                    <li><a href="#">友情链接管理</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <!--全部主体内容-->
    <div class="list-content">
        <!--块元素-->
        <div class="block">
            <!--页面有多个表格时，可以用于标识表格-->
            <h2>视频管理</h2>
            <!--正文内容-->
            <div class="main">
                <!--表格上方的搜索操作-->
                <div style="text-align:right;margin-bottom:10px;">
                    <div class="input-group">
                        <!-- 登录名检索 -->
                        <input type="text" class="text" id="keyWord" value="${keyWord}" placeholder="检索登录名"/>
                        <!-- 点击查询按钮 -->
                        <button class="button blue" onclick="search()"><span class="icon-search"></span></button>
                    </div>
                </div>

                <!--表格上方的操作元素，添加、删除-->
                <div class="operation-wrap">
                    <div class="buttons-wrap">
                        <button id="add_product" class="btn btn-primary" data-toggle="modal" data-target="#productModal">添加商品</button>
                    </div>
                </div>

                <!--class加上color可以实现隔行变色-->
                <!--color1表示奇数行着色、color2表示偶数行着色-->
                <table id="table" class="table">
                    <thead>
                    <tr>
                        <%--<th class="checkbox"><input type="checkbox" class="fill listen-1" /> </th>--%>
                        <th style="width:10%;">id</th>
                        <th>头像</th>
                        <th>登录名</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1,008</td>
                        <td>Fusce</td>
                        <td>nec</td>
                        <td>tellus</td>
                        <td>sed</td>
                        <td>sed</td>
                        <td>sed</td>
                        <td>
                            <button class="btn btn-info" data-toggle="modal" data-target="#productModal">修改</button>
                            <button class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <!-- 分页 -->
                <div class="page">
                    <ul id="page" class="pagination"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 用户模态框部分 -->
<!-- Modal -->
<div class="modal fade" id="productModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">用户添加</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="productName" class="col-sm-3 control-label">用户名称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="productName" placeholder="用户名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="productName" class="col-sm-3 control-label">用户价格</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="productName" placeholder="用户价格">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="productName" class="col-sm-3 control-label">用户分类</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="productName" placeholder="用户分类">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="productName" class="col-sm-3 control-label">用户数量</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="productName" placeholder="用户数量">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="productName" class="col-sm-3 control-label">用户图片</label>
                                <div class="col-sm-9">
                                    <input type="file" class="form-control" id="productName" placeholder="请上传用户图片">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="productName" class="col-sm-3 control-label">用户描述</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" id="productName" placeholder="用户描述"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>
    window.jQuery || document.write(
        '<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"><\/script>'
    )
</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" type="text/javascript"></script>
<script>
    javaex.loading();

    var currentPage = "${pageInfo.pageNum}";
    var pageCount = "${pageInfo.pages}";

    javaex.select({
        id : "group_id",
        isSearch : false
    });

    javaex.select({
        id : "group_id2",
        isSearch : false
    });

    javaex.page({
        id : "page",
        pageCount : pageCount,	// 总页数
        currentPage : currentPage,// 默认选中第几页
        // 返回当前选中的页数
        callback:function(rtn) {
            search(rtn.pageNum);
        }
    });

    function search(pageNum) {
        if (pageNum==undefined) {
            pageNum = 1;
        }

        // 用户组id
        var groupId = $("#group_id").val();
        // 关键字检索
        var keyWord = $("#keyWord").val();

        window.location.href = "list_normal.action"
            + "?pageNum="+pageNum
            + "&groupId="+groupId
            + "&keyWord="+keyWord
        ;
    }

    // obj为当前点击的元素对象
    function img(obj) {
        javaex.dialog({
            type : "image",	// 弹出层类型
            width : "400",	// 弹出层宽度
            url : obj.children[0].src	// 图片地址
        });
    }

    // 批量提交按钮点击事件
    $("#save").click(function() {
        var idArr = new Array();
        $(':checkbox[name="id"]:checked').each(function() {
            idArr.push($(this).val());
        });

        // 判断至少选择一条记录
        if (idArr.length==0) {
            javaex.optTip({
                content : "至少选择一条记录",
                type : "error"
            });
            return;
        }

        // 判断选择的哪一个单选框进行操作
        var opt = $(':radio[name="radio"]:checked').val();

        if (opt=="ban") {
            // 批量封禁
            javaex.optTip({
                content : "数据提交中，请稍候...",
                type : "submit"
            });

            $.ajax({
                url : "batch_update_status.json",
                type : "POST",
                dataType : "json",
                traditional : "true",
                data : {
                    "idArr" : idArr,
                    "status" : "2"
                },
                success : function(rtn) {
                    if (rtn.code=="000000") {
                        javaex.optTip({
                            content : rtn.message,
                            type : "success"
                        });

                        // 建议延迟加载
                        setTimeout(function() {
                            // 刷新页面
                            window.location.reload();
                        }, 2000);
                    } else {
                        javaex.optTip({
                            content : rtn.message,
                            type : "error"
                        });
                    }
                }
            });
        } else if (opt=="change_group") {
            // 批量更换用户组
            // 获取目标用户组的id
            var groupId = $("#group_id2").val();

            javaex.optTip({
                content : "数据提交中，请稍候...",
                type : "submit"
            });

            $.ajax({
                url : "batch_change_group.json",
                type : "POST",
                dataType : "json",
                traditional : "true",
                data : {
                    "idArr" : idArr,
                    "groupId" : groupId
                },
                success : function(rtn) {
                    if (rtn.code=="000000") {
                        javaex.optTip({
                            content : rtn.message,
                            type : "success"
                        });

                        // 建议延迟加载
                        setTimeout(function() {
                            // 刷新页面
                            window.location.reload();
                        }, 2000);
                    } else {
                        javaex.optTip({
                            content : rtn.message,
                            type : "error"
                        });
                    }
                }
            });
        } else {
            javaex.optTip({
                content : "请选择操作选项",
                type : "error"
            });
        }
    });
</script>
</body>
</html>
